<template>
	
	<div>
		<div class="bk2">
			<div style="margin-top:15%;text-align: center;font-size: 40px;color: white;">
				5704 Studio
			</div>
		</div>
				<el-menu type="flex" class="top"
						active-text-color="#ffd04b" 
						mode="horizontal" >
					<el-menu-item index="1" style="margin-left: 2%;">
						<router-link to="/home">
							<img src="../assets/img/5704.png" style="height: 4rem;width: 9rem;">
						</router-link>
					</el-menu-item>
					<el-menu-item index="1" style="margin-left: 6%;">
						<router-link to="/home">
							
							<el-button type="text" class="btn" round>主页</el-button>
						</router-link>
					</el-menu-item>
					<el-menu-item index="3">
						<router-link to="/activity" >
							<el-button type="text" class="btn" round>活动</el-button>
						</router-link>
					</el-menu-item>
					<el-menu-item index="4">
						<router-link to="/recruit">
							<el-button type="text" class="btn" round>招新</el-button>
						</router-link>
					</el-menu-item>
					<el-menu-item index="5"  v-if="this.$GLOBAL.isInsider">
						<router-link to="/project">
							<el-button type="text" class="btn" round>项目</el-button>
						</router-link>
					</el-menu-item>
					<!-- <el-menu-item index="6"  v-if=this.$GLOBAL.isInsider>
						<router-link to="/project">
							<el-button class="btn" round>活动</el-button>
						</router-link>
					</el-menu-item> -->
					<el-menu-item index="7 " v-if="this.$GLOBAL.isInsider">
						<router-link to="/userBook" >
							<el-button type="text" class="btn" round>通讯录</el-button>
						</router-link>
					</el-menu-item>
					<el-menu-item index="8" v-if="this.$GLOBAL.isAdmin">
						<router-link to="/admin">
							<el-button type="text" class="btn" round>管理</el-button>
						</router-link>
					</el-menu-item>
					<el-menu-item index="9" style="float: right; margin-right: 2%;">
							<router-link to="/information">
								<el-avatar :size="45" :src="this.$GLOBAL.avatar" class="avatar btn"></el-avatar>
							</router-link>
					</el-menu-item>
					<el-menu-item index="10" v-if=!this.$GLOBAL.isLogin style="float: right;">
						<router-link to="/login">
							<el-button type="text" class="btn"  round>注册/登录</el-button>
						</router-link>
					</el-menu-item>
					
				</el-menu>
		
				<router-view/>
			
			<el-row type="flex" :gutter='2' align="middle" class=" animate__animated animate__fadeInLeft">
				<el-col :span="24" class="creatTime">2018.01.01</el-col>
			</el-row >
			<el-row type="flex" :gutter='2' align="middle" class=" animate__animated animate__fadeInLeft">
				<el-col :span="24" class="creatTime">工作室成立</el-col>
			</el-row>
		
	</div>
	
	
	
</template>
<script>
	export default {
		name: 'home',
		props: {},
		
		data: function() {
			return {
				margin:"margin-top: 20px;"
			}
		},
		mounted() {
			
			
			// let that = this;
			// // window.onresize = function windowResize() {
			//   // 通过捕获系统的onresize事件触发我们需要执行的事件
			// let w = window.innerWidth
			// let h = 80
			  
			  
			// that.margin ="margin-top:"+ h + "px;"
			// 
			// }
		 }
	}
</script>

<style scoped>

	.bk{
	  /* position: fixed; */
	 	width: 100%;
	 	height: 100%;
	 		
	  background-color: rgba(0, 0, 0, 0.911);
	}
	 .bk2 {
	   position: fixed;
	   width: 100%;
	   height: 100%;
	 
	   background-color: rgba(0, 0, 0, 0.911);
	 }
	 	
	 	.top{
	 		position: fixed;
	 		z-index: 10;
	 		width: 100%;
	 		background-color:rgba(39, 43, 44, 0.87);
	 	}
	 	
	 	
	 	.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
	 	.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
	 	.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
	 	  background-color: rgba(128, 128, 128, 0.507);
	 	}
	 	.btn {
	 
	 		border: 0;
	 		font-size: 20px;
	 		font-weight: bold;
	 		width: 90%;
	 		height: 60px;
	 		font:"microsoft yahei";
	 		background-color: rgba(255, 255, 255, 0);
	 		color: white;
	 	}
	 	.btn:focus {
	 		background-color:  rgba(128, 128, 128, 0);
	 		color:white;
	 	}
	 	.btn:hover {
	 		border-radius: 1.75px;
	 		width:100%;
	 		background-color: rgba(255, 255, 255, 0);
	 		color: wheat;
	 	}
	 	.avatar:hover{
	 		border-radius: 25px;
	 		border: 4px solid rgba(39, 43, 44, 0.5);
	 	}
	 	.creatTime{
	 	
	 		text-align:right;
	 		font-family:方正舒体;
	 		font-size: 25px;
	 	}
</style>
